import React from 'react'
import PropTypes from 'prop-types'
import {routerRedux} from 'dva/router'
import {connect} from 'dva'
import {message} from 'antd'
import {Page} from 'components'
import queryString from 'query-string'
import List from './components/List'
import Filter from './components/Filter'
import Modal from './components/Modal'


const RiskControl = ({
                    location, dispatch, riskControl, loading,
                  }) => {
  const {query, pathname} = location
  const {
    list, pagination, currentItem, modalVisible, disable, modalType, selectedRowKeys, departments,
  } = riskControl

  const handleRefresh = (newQuery) => {
    dispatch(routerRedux.push({
      pathname,
      search: queryString.stringify({
        ...query,
        ...newQuery,
      }),
    }))
  }

  const modalProps = {
    item: currentItem,
    visible: modalVisible,
    disable,
    width: 500,
    maskClosable: false,
    confirmLoading: loading.effects[`riskControl/${modalType}`],
    title: `${modalType === 'handle' ? '请填写处理理由' : disable ? '未处理' : '未处理'}`,
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      if (disable) {
        dispatch({
          type: 'riskControl/hideModal',
        })
      } else {
        dispatch({
          type: `riskControl/update`,
          payload: data,
        })
          .then(() => {
            handleRefresh()
            message.success("操作成功")
          })
      }
    },
    onCancel () {
      dispatch({
        type: 'riskControl/hideModal',
      })
    },
  }

  const listProps = {
    rowKey: 'id',
    dataSource: list,
    loading: loading.effects['riskControl/query'],
    pagination,
    location,
    onChange (page) {
      handleRefresh({
        current: page.current,
        size: page.pageSize,
      })
    },
    showModal (record) {
      dispatch({
        type: 'riskControl/showModal',
        payload: {
          modalType: 'handle',
          disable: false,
          currentItem: record,
        },
      })
    },
    rowSelection: {
      selectedRowKeys,
      onChange: (keys) => {
        dispatch({
          type: 'riskControl/updateState',
          payload: {
            selectedRowKeys: keys,
          },
        })
      },
      onSelect: (record) => {
        dispatch({
          type: 'riskControl/updateState',
          payload: {
            selectRecord: record,
          },
        })
      },
    },
  }

  const filterProps = {
    departments,
    filter: {
      ...query,
    },
    onFilterChange (value) {
      handleRefresh({
        ...value,
        current: 1,
      })
    },
  }

  return (
    <Page inner>
      <Filter {...filterProps} />
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

RiskControl.propTypes = {
  employee: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({riskControl, loading}) => ({riskControl, loading}))(RiskControl)
